<%--
  Created by IntelliJ IDEA.
  User: 何亮龙
  Date: 2020/7/22
  Time: 10:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>影院票务管理系统</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/style/CSS/normalize.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/style/CSS/reg.css">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/front/style/IMG/Blogo.png" type="image/x-icon">
    <%--<link rel="stylesheet" href="${pageContext.request.contextPath}/front/style/CSS/register.css">--%>
</head>
<body>
<!-- 顶部 -->
<header>
    <div>
        <a href="#"></a>
    </div>
</header>

<!-- 注册部分 -->
<div class="zhuche">
    <!-- 1 头像预览效果 -->
    <div style="margin:0 150px 60px 150px;">
        <img src="${pageContext.request.contextPath}/download/img?fileName=user.png" id="img3" width="100px" height="100px">
    </div>
    <form id="registerForm" method="post" action="${pageContext.request.contextPath}/front/register" enctype="multipart/form-data">

        <div>
            <!-- accept="image/jpg,image/jpeg,image/png" 限制上传文件的类型-->
            <label>添加头像图片:</label>
            <input type="file" id="file"class="filepath" name="accountPicture" onchange="setImagePriview()" accept="image/jpg,image/jpeg,image/png">
        </div >
        <div class="zhuche3">
            <label for="accountName" >账号:</label>
            <input type="text" name="accountName" id="accountName" placeholder="请输入要注册的账号名"  required="required">
            <label id="accountNameTip" ></label>
        </div>
        <div class="zhuche1">
            <label>性别:</label>
        <tr>
            <td><input type="radio" name="accountGender" checked="checked" value="男"/>男</td>&nbsp&nbsp&nbsp&nbsp
            <td><input type="radio" name="accountGender" value="女"/>女</td>
        </tr>
        </div>
        <div class="zhuche4">
            <label for="accountPwd" >密码:</label>
            <input type="password" name="accountPwd" id="accountPwd" placeholder="请输入要注册的密码"  required="required">
        </div>

        <div class="zhuche5">
            <!-- 手机号 -->
            <label for="accountPhone" >手机号</label>
            <input type="tel" name="accountPhone" id="accountPhone" placeholder="请输入要注册手机号" maxlength="11" required="required">
        </div>
        <div class="zhuche6">
            <input type="submit" value="注册" class="btn btn-success"  id="register" onclick="alert('是否提交用户注册信息')"/>
        </div>
        <div class="zhuche7">
            <span>已有帐号？</span><a href="accountLogin.jsp">马上登录</a>
        </div>
    </form>
</div>
</body>
<script src="${pageContext.request.contextPath}/front/style/JS/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // 对账号输入框绑定失去焦点事件
        $("#accountName").blur(function(){
            // 获取输入的账号
            var accountName = $(this).val().trim();
            if(accountName == ""){
                $("#accountNameTip").text("账号不能为空");
                $("#accountNameTip").addClass("error");
            }else{
                // 发送ajax请求
                $.ajax({
                    async:true,
                    url:"${pageContext.request.contextPath}/front/existsOfAccountName",
                    type:"GET",
                    data:{accountName:accountName},
                    dataType:"text",
                    success:function(result,status,xhr){
                        if(result=="true"){ // 用户名存在
                            $("#accountNameTip").text("账号已存在");
                            $("#accountNameTip").addClass("error");
                            // 注册按钮设置不可用
                            $("#register").prop("disabled",true);
                        }else if(result=="false"){// 用户名不存在
                            $("#accountNameTip").text("账号可用");
                            $("#accountNameTip").addClass("success");
                            // 注册按钮设置可用
                            $("#register").prop("disabled",false);
                        }

                    },
                    error:function(xhr,status,error){
                        alert("ajax异步请求失败");
                    }
                });
            }
        });
    })
    //性别选项
    var sexdata = document.getElementsByName("accountGender");
    var stuSex;
    if(sexdata[0].prop("checked")){
        stuSex = "男";
    }else if(sexdata[1].prop("checked")){
        stuSex= "女";
    }
    // 选择文件的改变事件,生成图片预览功能
    function setImagePriview() {
        // 得到文件列表数组,获取数组中的第一个文件
        var file = document.getElementById("file").files[0];
        // 没有选择文件
        var content = ""
        if(file==null){
            document.getElementById("img3").src = "${pageContext.request.contextPath}/front/style/IMG/avatar.png";
        }else{
            // 构建一个文件渲染对象
            var reads = new FileReader();
            // FileReader.readAsDataURL 读取指定Blob或File的内容
            reads.readAsDataURL(file);
            // 获取文件数据
            reads.onload = function(){
                // 显示图片
                document.getElementById("img3").src = this.result;
            }
        }

    }

    // 提示文件上传不符合的操作
    var fileuploaderror = "${param.fileuploaderror}";
    if(fileuploaderror!=""){
        alert("图片文件只能是jpg/jpeg/png格式");
    }
</script>
</html>
